'use strict'


/* 

练习：利用reduce()求积：
```
'use strict';

function product(arr) {
    return 0;

}

// 测试:
if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}
*/

function product(arr){
    return arr.reduce((x,y)=>x*y)
}

if (product([1, 2, 3, 4]) === 24 && product([0, 1, 2]) === 0 && product([99, 88, 77, 66]) === 44274384) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}


/*
练习
请把用户输入的不规范的英文名字，变为首字母大写，其他小写的规范名字。输入：['adam', 'LISA', 'barT']，输出：['Adam', 'Lisa', 'Bart']。
```
'use strict';

function normalize(arr) {
    return [];

}

// 测试:
if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}
*/
function normalize(arr){
    return arr.map(name=>name[0].toUpperCase()+name.substring(1).toLowerCase());
}

if (normalize(['adam', 'LISA', 'barT']).toString() === ['Adam', 'Lisa', 'Bart'].toString()) {
    console.log('测试通过!');
}
else {
    console.log('测试失败!');
}

/*
练习：不要使用JavaScript内置的parseInt()函数，利用map和reduce操作实现一个string2int()函数：
```
'use strict';

function string2int(s) {
    return 0;

}

// 测试:
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        console.log('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        console.log('请勿使用Number()!');
    } else {
        console.log('测试通过!');
    }
}
else {
    console.log('测试失败!');
}
*/

function string2int(s){
   return s.split("").map(x=>x*1).reduce((x,y)=>x*10+y)

}
if (string2int('0') === 0 && string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        console.log('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        console.log('请勿使用Number()!');
    } else {
        console.log('测试通过!');
    }
}
else {
    console.log('测试失败!');
}


/*
练习
请尝试用filter()筛选出素数：
```
'use strict';

function get_primes(arr) {
    return [];

}

// 测试:
var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    console.log('测试通过!');
} else {
    console.log('测试失败: ' + r.toString());
}
*/

function get_primes(arr){
    return arr.filter(function(value){

        for(var i=2;i<value;i++){
    
            if(value%i===0){
    
                return false;
    
            }
    
        }
    
        return true;
    
    }).slice(1);
}

var
    x,
    r,
    arr = [];
for (x = 1; x < 100; x++) {
    arr.push(x);
}
r = get_primes(arr);
if (r.toString() === [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71, 73, 79, 83, 89, 97].toString()) {
    console.log('测试通过!');
} else {
    console.log('测试失败: ' + r.toString());
}



//排序

var arr = [10, 20, 1, 2];
arr.sort(function (x, y) {
    if (x < y) {
        return -1;
    }
    if (x > y) {
        return 1;
    }
    return 0;
});
console.log(arr); 


/*

练习
对于一个已有的HTML结构：
```
Scheme
JavaScript
Python
Ruby
Haskell
<!-- HTML结构 -->
<ol id="test-list">
    <li class="lang">Scheme</li>
    <li class="lang">JavaScript</li>
    <li class="lang">Python</li>
    <li class="lang">Ruby</li>
    <li class="lang">Haskell</li>
</ol>
```
按字符串顺序重新排序DOM节点：
```
'use strict';
// sort list:

// 测试:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
            console.log('测试通过!');
        }
        else {
            console.log('测试失败: ' + arr.toString());
        }
    }
    else {
        console.log('测试失败!');
    }
})();
```
*/

var list = document.getElementById('test-list')
var slist = list.children;
console.log(slist);
slist = Array.prototype.slice.call(slist).sort(function(a, b){
   return a.innerHTML > b.innerHTML ? 1 : -1 ;
})
slist.forEach(function(el){
     list.appendChild(el);
})

;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 5) {
        arr = [];
        for (i=0; i<t.children.length; i++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
            console.log('测试通过!');
        }
        else {
            console.log('测试失败: ' + arr.toString());
        }
    }
    else {
        console.log('测试失败!');
    }
})();


/*
练习
JavaScript
Swift
HTML
ANSI C
CSS
DirectX
/*
<!-- HTML结构 -->
<ul id="test-list">
    <li>JavaScript</li>
    <li>Swift</li>
    <li>HTML</li>
    <li>ANSI C</li>
    <li>CSS</li>
    <li>DirectX</li>
</ul>
```
把与Web开发技术不相关的节点删掉：
```
'use strict';
/*

// 测试:
;(function () {
    var
        arr, i,
        t = document.getElementById('test-list');
    if (t && t.children && t.children.length === 3) {
        arr = [];
        for (i = 0; i < t.children.length; i ++) {
            arr.push(t.children[i].innerText);
        }
        if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
            console.log('测试通过!');
        }
        else {
            console.log('测试失败: ' + arr.toString());
        }
    }
    else {
        console.log('测试失败!');
    }
})();
*/

var arr = ['JavaScript','HTML','CSS'];

var parent = document.getElementById('test-list');

for (var i of parent.children) {

    if (!arr.includes(i.innerText)) {

        parent.removeChild(i);

    }

}


// 选择<p>JavaScript</p>:
var js = document.getElementById('test-p');

// 选择<p>Python</p>,<p>Ruby</p>,<p>Swift</p>:
var arr = document.getElementsByClassName('c-red')[1].getElementsByTagName('p');

// 选择<p>Haskell</p>:
var haskell = document.getElementsByClassName('c-green')[1].lastElementChild;


/*
### 练习
使用jQuery选择器分别选出指定元素：

+ 仅选择JavaScript

+ 仅选择Erlang

+ 选择JavaScript和Erlang

+ 选择所有编程语言

+ 选择名字input

+ 选择邮件和名字input
```
<!-- HTML结构 -->
<div id="test-jquery">
    <p id="para-1" class="color-red">JavaScript</p>
    <p id="para-2" class="color-green">Haskell</p>
    <p class="color-red color-green">Erlang</p>
    <p name="name" class="color-black">Python</p>
    <form class="test-form" target="_blank" action="#0" onsubmit="return false;">
        <legend>注册新用户</legend>
        <fieldset>
            <p><label>名字: <input name="name"></label></p>
            <p><label>邮件: <input name="email"></label></p>
            <p><label>口令: <input name="password" type="password"></label></p>
            <p><button type="submit">注册</button></p>
        </fieldset>
    </form>
</div>
```
*/
selected = $("#para-1");

selected = $(".color-red.color-green");

selected = $("#para-1,.color-red.color-green");

selected = $("p[class^=color-]");

selected = $("p input[name=name]");

selected = $("input[name=name],input[name=email]");

/*
针对如下HTML结构：
```
<!-- HTML结构 -->

<div class="test-selector">
    <ul class="test-lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
    <ol class="test-lang">
        <li class="lang-swift">Swift</li>
        <li class="lang-java">Java</li>
        <li class="lang-c">C</li>
    </ol>
</div>
```
选出相应的内容并观察效果：
```
'use strict';
var selected = null;
// 分别选择所有语言，所有动态语言，所有静态语言，JavaScript，Lua，C等:
selected = ???
*/
// 分别选择所有语言，所有动态语言，所有静态语言，JavaScript，Lua，C等:
selected = $('div.test-selector li');        // 所有语言
selected = $('ul.test-lang li');             // 所有动态语言
selected = $('ol.test-lang li');             // 所有静态语言
selected = $('ul.test-lang li:first-child')  // JavaScript
selected = $('ul.test-lang li:last-child')   // Lua
selected = $('ol.test-lang li:last-child')   // C


/*
对于下面的表单：
```
<form id="test-form" action="#0" onsubmit="return false;">
    <p><label>Name: <input name="name"></label></p>
    <p><label>Email: <input name="email"></label></p>
    <p><label>Password: <input name="password" type="password"></label></p>
    <p>Gender: <label><input name="gender" type="radio" value="m" checked> Male</label> <label><input name="gender" type="radio" value="f"> Female</label></p>
    <p><label>City: <select name="city">
    	<option value="BJ" selected>Beijing</option>
    	<option value="SH">Shanghai</option>
    	<option value="CD">Chengdu</option>
    	<option value="XM">Xiamen</option>
    </select></label></p>
    <p><button type="submit">Submit</button></p>
</form>
```
输入值后，用jQuery获取表单的JSON字符串，key和value分别对应每个输入的name和相应的value，例如：`{"name":"Michael","email":...}`
```
'use strict';
var json = null;
json = ???;
*/
let formData = {};

$('#test-form label [name]').map(function () {

    formData[this.name] = this.value;

});

json = JSON.stringify(formData);



/*
练习：分别用css()方法和addClass()方法高亮显示JavaScript：
*/

json = {};
json.gender=$('form#test-form :checked').val();
json=JSON.stringify(json);



/*
除了列出的3种语言外，请再添加Pascal、Lua和Ruby，然后按字母顺序排序节点：
```
<!-- HTML结构 -->
<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>
'use strict';


*/

li = $('#test-div ul>li');
li.remove();
var arr = ['Pascal', 'Lua', 'Ruby', 'Python', 'Swift', 'JavaScript'];
arr.sort();
var ul = $('#test-div>ul');
console.log(arr[0]);
for (var i=0; i<arr.length; i++){
    ul.append('<li><span>' + arr[i] + '</span></li>');
}